<script setup lang="ts">
const props = defineProps<{
  /**
   * 会议室使用情况
   * false: 没被占用
   * true: 已经占用
   */
  isFullRoom: boolean[];
}>();
//6-23点时间集合:36个时间
const hours: string[] = [];
for (let i = 0; i < 18; i++) {
  const hour = 6 + i;
  hours[i] = hour < 10 ? '0' + hour : hour.toString();
}
</script>
<template>
  <view class="meeting-room-status-list__time-title">
    <text
      v-for="hour in hours.slice(0, 9)"
      :key="hour"
      class="meeting-room-status-list__time-title--text"
      >{{ hour }}</text
    >
  </view>
  <view class="meeting-room-status-list__time-title">
    <view
      v-for="isFull in props.isFullRoom.slice(0, 18)"
      class="meeting-room-status-list__time-title--rect"
      :style="{ backgroundColor: isFull ? '#507AEE' : '' }"
    ></view>
  </view>
  <view class="meeting-room-status-list__time-title">
    <text
      v-for="hour in hours.slice(9)"
      class="meeting-room-status-list__time-title--text"
      :key="hour"
      >{{ hour }}</text
    >
  </view>
  <view class="meeting-room-status-list__time-title">
    <view
      v-for="isFull in props.isFullRoom.slice(18)"
      class="meeting-room-status-list__time-title--rect"
      :style="{ backgroundColor: isFull ? '#507AEE' : '' }"
    ></view>
  </view>
</template>
<style lang="scss">
.meeting-room-status-list {
  &__time-title {
    display: flex;
    color: #666;
    &--text {
      flex: 1;
      margin-top: 12px;
    }
    &--rect {
      display: inline-block;
      flex: 1;
      height: 40px;
      border-top: #eee solid 2px;
      border-left: #eee solid 2px;
      border-bottom: #eee solid 2px;
      &:first-child {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
      }
      &:last-child {
        border-right: #eee solid 2px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
      }
    }
  }
}
</style>
